<template>
    <div class="layout_content">
        <!-- <img :src="headback" class="bg" /> -->
        <CustomFireControlPresentationData
            v-if="store.ViewStatus === 'FireControl'"
        ></CustomFireControlPresentationData>
        <div class="Map3d">
            <div id="cesiumContainer"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick } from 'vue';
import headback from '@/assets/image/bg.png';
import { CheckSiderView } from '@/store/index';

const store = CheckSiderView();
const state = reactive({
    // sceneUrl: 'http://sxkj2022.tpddns.cn:2501/iserver/services/3D-youmo/rest/realspace', // 倾斜摄影
    sceneUrl: 'http://sxkj2022.tpddns.cn:2501/iserver/services/3D-hgyq/rest/realspace',
    scene: '',
    viewer: '',
    qxLayers: [], // 倾斜layers
    fcLayers: [], // 分层layers
    defaultCameraDestination: null,
    defaultCameraOrientation: null,
    headback
});

// 三维地图
const getMap = () => {
    state.viewer = new Cesium.Viewer('cesiumContainer');
    // 添加在线的添加S3M图层
    state.scene = state.viewer.scene;
    const promise = state.scene.open(state.sceneUrl);
    // 添加底图
    // 加载倾斜摄影
    Cesium.when(promise, function (layers) {
        state.qxLayers = layers;
        // 更精准的定位
        state.defaultCameraDestination = new Cesium.Cartesian3(
            -2536479.9595823046,
            4562464.161136838,
            3665728.7945476957
        );
        state.defaultCameraOrientation = {
            heading: 6.281465118495294,
            pitch: -0.7070786731388363,
            roll: 2.398081733190338e-14
        };
        state.scene.camera.setView({
            destination: state.defaultCameraDestination,
            orientation: state.defaultCameraOrientation
        });
    });

    state.viewer.scene.sun.show = false; // 关闭太阳
    const position = new Cesium.Cartesian3(-2787828.0064549833, 4729298.786897348, 3247007.018260645);
    const options = {
        intensity: 0.2
    };
    const directionalLight = new Cesium.DirectionalLight(position, options);
    state.viewer.scene.addLightSource(directionalLight);
};
// 1. 首先注释掉上面的 destination: state.defaultCameraDestination,orientation: state.defaultCameraOrientation定位信息就会直接显示出三维地图（暂时没有调整好摄像机位置）
// 2. 调整好试图位置后，添加一个临时的按钮 点击打印 camera， 然后修改上面的 defaultCameraDestination和defaultCameraOrientation 里面的位置信息
// 3. camera下面的 position 就是 xyz 写入 defaultCameraDestination
// 4. defaultCameraOrientation 就找打印信息里面的heading，pitch， roll
const btn = () => {
    console.log(state.viewer.camera);
};
onMounted(async () => {
    // getMap();
});
</script>
<style scoped lang="scss">
.layout_content {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('@img/bg.png') no-repeat;
    background-size: 100% 100%;
    z-index: 0;
    .bg {
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .Map3d {
        width: 100%;
        height: 100%;
        position: relative;
        #cesiumContainer {
            width: 100%;
            height: 100%;
            position: absolute;
        }
    }
}
</style>
